import {  Route, Routes } from "react-router-dom";
import { AuthRoute } from "@/components/AuthRoute";


import { HistoryRouter, history } from '@/utils/history'
// 导入必要组件
import { lazy, Suspense } from 'react'
// 导入页面组件
// 按需导入路由组件
const Login = lazy(() => import('@/pages/login'));
const Layout = lazy(() => import('@/pages/layout'));
const Home = lazy(() => import('@/pages/Home'));
const Article = lazy(() => import('@/pages/Article'));
const Publish = lazy(() => import('@/pages/Publish'));
const NotFound = lazy(() => import('@/pages/notFound'));
// import Login from "@/pages/login";
// import Layout from "@/pages/layout";
// import NotFound from "@/pages/notFound";
// import Home from "@/pages/Home";
// import Publish from "@/pages/Publish";
// import Article from "@/pages/Article";


const heightApp = {
  height: "100vh",
};
function App() {
  return (
    <HistoryRouter history={history}>
       <Suspense
        fallback={
          <div
            style={{
              textAlign: 'center',
              marginTop: 200
            }}
          >
            loading...
          </div>
        }
      >
      <div className="App" style={heightApp}>
        <Routes>
          <Route
            path="/"
            element={
              <AuthRoute>
                <Layout />
              </AuthRoute>
            }
          >
          <Route index element={<Home />} />
          <Route path="article" element={<Article />} />
          <Route path="publish" element={<Publish />} /></Route>
          <Route path="/login" element={<Login />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </div></Suspense>
    </HistoryRouter>
  );
}

export default App;
